import React, { ReactNode } from "react";
import { Modal as AntModal, Button } from "antd";
import type { ButtonProps } from "antd";
import styles from "./modal.module.css";

export interface ModalProps {
  /** 对话框是否可见 */
  visible: boolean;
  /** 标题，支持字符串或自定义内容 */
  title?: ReactNode;
  /** 对话框内容 */
  children: ReactNode;
  /** 确定按钮文本 */
  okText?: string;
  /** 确定按钮属性 */
  okButtonProps?: ButtonProps;
  /** 确定按钮点击回调 */
  onOk?: () => void;
  /** 是否禁用确定按钮 */
  okDisabled?: boolean;
  /** 关闭回调 */
  onCancel?: () => void;
  /** 自定义宽度，默认 600px */
  width?: number | string;
  /** 自定义背景颜色 */
  backgroundColor?: string;
  /** 自定义样式 */
  className?: string;
  /** 自定义底部高度样式 */
  footerStyle?: React.CSSProperties;
  /** 自定义标题样式 */
  titleStyle?: React.CSSProperties;
  /** 居中展示 */
  centered?: boolean;
  /** 是否显示右上角的关闭按钮 */
  closable?: boolean;
  /** 自定义关闭图标 */
  closeIcon?: ReactNode;
  /** z-index */
  zIndex?: number;
  /** 自定义底部内容，传 null 隐藏底部 */
  footer?: ReactNode | null;
  /** 是否启用底部背景色 */
  enableFooterBackground?: boolean;
}

/**
 * 自定义模态对话框组件，基于 Ant Design Modal
 *
 * @example
 * ```tsx
 * <Modal
 *   visible={visible}
 *   title="标题"
 *   onOk={handleOk}
 *   onCancel={handleCancel}
 *   okDisabled={!formValid}
 * >
 *   内容
 * </Modal>
 * ```
 */
const Modal: React.FC<ModalProps> = ({
  visible,
  title,
  children,
  okText = "确定",
  okButtonProps,
  onOk,
  okDisabled = false,
  onCancel,
  width = 600,
  backgroundColor = "#FFFFFF",
  className,
  footerStyle = {},
  titleStyle = {},
  centered = true,
  closable = true,
  closeIcon,
  zIndex,
  footer = undefined, // 默认显示底部按钮
  enableFooterBackground = true, // 默认启用底部背景色
}) => {
  // 自定义 footer，当 footer 为 null 时隐藏底部
  const defaultFooter = (
    <div
      className={styles.footer}
      style={{
        ...footerStyle,
        height: 64, // 固定高度为 64px
        backgroundColor: enableFooterBackground ? "#EFEFF6" : "transparent",
        borderTop: enableFooterBackground ? "1px solid #f0f0f0" : "none",
      }}
    >
      <Button
        type="primary"
        onClick={onOk}
        disabled={okDisabled}
        {...okButtonProps}
      >
        {okText}
      </Button>
    </div>
  );

  const modalFooter = footer === null ? null : footer || defaultFooter;

  // 如果 title 是字符串，使用自定义样式；如果是 ReactNode，直接使用
  const modalTitle =
    typeof title === "string" ? <div style={titleStyle}>{title}</div> : title;

  // 准备样式对象
  const modalStyles = {
    body: {
      backgroundColor: backgroundColor || "#FFFFFF",
      padding: "24px",
      paddingTop: title ? "0px" : "48px", // 如果没有标题，增加顶部间距
      paddingBottom: enableFooterBackground ? "24px" : "0px", // 如果启用底部背景色，底部间距为 24
    },
  };

  return (
    <AntModal
      open={visible}
      title={modalTitle}
      onOk={onOk}
      onCancel={onCancel}
      width={width}
      footer={modalFooter}
      centered={centered}
      closable={closable}
      closeIcon={closeIcon}
      className={`${styles.customModal} ${className || ""}`}
      zIndex={zIndex}
      maskClosable={false}
      styles={modalStyles} // 使用新的 styles API 替代 bodyStyle
    >
      {children}
    </AntModal>
  );
};

export default Modal;
